<template>
	<div class="tips-box">
				<div class="tip" v-for="item in contentTopList" :key="item.leftTitle">
					<span class="label">{{ item.leftTitle }}</span>
					<count-to :startVal="0" :endVal="item.value"></count-to>
				</div>
	</div>
</template>

<script>
import countTo from 'vue-count-to';
import { getProjectTypeStatistics } from '@/views/cockpit/api/map'

export default {
  name:"projectStatistics",
	components: {
    countTo,
	},
	data() {
		return {
			contentTopList: [],
		};
	},
	mounted() {
		this.getProjectTypeStatistics('')
	},
	beforeDestroy() {
		this.clearData();
	},
	methods: {
		clearData() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		loadData() {
			this.loading = false;
		},
    getProjectTypeStatistics (name) {
    			this.contentTopList = []
    			getProjectTypeStatistics(name).then(res => {
    				let sum = 0
    				res.data.forEach(item => {
    					if (item.leftTitle.indexOf('市政') > -1) {
    						sum += item.value
    					}
    				})
    				res.data.push({
    					leftTitle: '市政工程',
    					value: sum
    				})
    				res.data.forEach(item => {
    					if (item.value !== 0 && item.leftTitle !== '市政道路工程' && item.leftTitle.indexOf('其他') < 0) {
    						this.contentTopList.push(item)
    					}
    				})
    			}).catch(res => {
    				console.log(res)
    			})
    		},
	}
};
</script>
<style lang="scss" scoped>

.tips-box {
	height: 61px;
	display: flex;
  flex-direction: row;
  gap: 20px;
	.tip {
		flex: 1 0 0;
		padding: 0 10px;
		height: 60px;
		box-shadow: inset 0 0 24px 1px #204EA5;
		border-radius: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.label {
			font-size: 24px;
			font-weight: 400;
			color: #FFF;
			font-family: PingFang SC-Regular, PingFang SC, serif;
		}
		> span {
			font-size: 24px;
			font-family: din, serif;
			font-weight: bold;
			color: #40E2FF;
		}
	}
}
</style>
